<template>
    <div class="swiperContainer" 
        @touchstart='touchStart'
        @touchend='touchEnd'
        v-loading="isLoading">
        <!-- 轮播图片 -->
        <transition-group  :name="scrollType">
            <img 
                v-for="img in imgList"
                :key="img.id"
                :src="img.url" 
                v-show="img.id == curIndex"
                >

        </transition-group>
            <!-- 底部滚动条 -->
            <div class="scrollbar animate__animated animate__bounce">
                <div class="bottomDot" 
                    v-for="(img,index) in imgList"
                    :class="{'active':index == curIndex}">
                </div>
            </div>
        

    </div>
            
</template>
    
<script setup >

    import {reactive,ref,onBeforeMount,onMounted,onUpdated,computed} from 'vue'
    let props = defineProps({
        images:{
            type:String,
            default:''
        }
    })

    let isLoading = computed(()=>{
        if (props.images == ''){
            return true;
        }
        else return false;
    })

    let curIndex  = ref(0);

    var imgList = computed(()=>{
        let res = [];
        let imgs =  props.images.split(',');
        for (var i in imgs){
            res.push({
                id:i,
                url:imgs[i]
            })
        }
        return res;
    
    })



    let touchObj = reactive({
        startX:0,//开始触摸的位置
        moveX:0,//滑动时的位置
        endX:0,//结束触摸的位置
        disX:0,//移动距离
        slideEffect:'',//滑动时的效果,使用v-bind:style="deleteSlider"
    })

    let scrollType = ref('scrollToLeft');

    function touchStart(ev){
        ev.preventDefault();
        if(ev.touches.length == 1) { //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
            touchObj.startX = ev.touches[0].clientX; // 记录开始位置
        }
        console.log(touchObj.startX);
    }

    function touchEnd(ev){
        console.log(ev);
        if(ev.changedTouches.length == 1) { //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
            touchObj.endX = ev.changedTouches[0].clientX; // 记录开始位置
        }
        
        console.log(touchObj.endX);
        if (touchObj.endX - touchObj.startX > 50){
            console.log('右滑');
            curIndex.value=curIndex.value-1;
            if (curIndex.value<0) curIndex.value=0;
            scrollType.value = 'scrollToRight'
        }
        if (touchObj.endX - touchObj.startX < -50){
            console.log('左滑');
            curIndex.value++;
            console.log(imgList.value.length);
            //超出最后一张图片
            if (curIndex.value>imgList.value.length-1) curIndex.value--;
            scrollType.value = 'scrollToLeft'
        }
    }


</script>
    
<style lang="scss" scoped>
.swiperContainer{
    position: relative;
    display: flex;
    height: 2.4rem;
    width: 2.4rem;
    margin-left: 0.94rem;
    overflow: scrollToLeft;
    >img{
        
        width: 2.4rem;
        height: 2.4rem;
    }

    /* 底部滚动条 */
    .scrollbar{
        position: absolute;
        left: 1rem;
        bottom:-0.3rem;
        display: flex;

        .bottomDot{
            width: 0.06rem;
            height: 0.06rem;
            border-radius: 50%;
            background-color: #d7d7d7;
            margin-right: 0.1rem;
        }

        .active{
            width: 0.13rem;
            background-color: $themeOrange;
            border-radius: 3px;
        }
    }
    
}



.scrollToLeft-enter-active, .scrollToLeft-leave-active,
.scrollToRight-enter-active, .scrollToRight-leave-active
{
	transition:  0.1s ease
 }

 .scrollToLeft-enter-from,.scrollToRight-leave-to{
  transform: translateX(100%);
}

.scrollToLeft-enter-to,.scrollToRight-enter-to{
  transform: translateX(0);
}

.scrollToLeft-leave-from,.scrollToRight-leave-from{
  transform: translateX(0);
}

.scrollToLeft-leave-to,.scrollToRight-enter-from{
  transform: translateX(-100%);
}

    
</style>